<!-- eslint-disable vue/no-mutating-props -->
<template>
  <card :showDivider="false">
    <div class="basic-info-wrapper">
      <div class="section-item">
        <!-- <div class="section-item-header">标题</div> -->
        <div class="section-item-content transform-top">
          <a-descriptions :size="'medium'" :align="{ label: 'right' }">
            <a-descriptions-item label="原预计租赁周期">{{
              order.preStartTime && order.preEndTime ? order.preStartTime + '-' + order.preEndTime : '-'
            }}</a-descriptions-item>
            <a-descriptions-item label="原租期">{{ order.preRentDays }}</a-descriptions-item>
            <a-descriptions-item label="现预计租赁周期">{{
              order.startTime && order.endTime ? order.startTime + '-' + order.endTime : '-'
            }}</a-descriptions-item>
            <a-descriptions-item label="现租期">{{ order.rentDays }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <!-- 表格 -->
      <table-index class="insure-card-table" :table="tableCompulsory" @loadData="loadCompulsoryData">
        <template #time="{ record }">
          <div>{{ record.startTime }} - {{ record.endTime }}</div>
        </template>
      </table-index>
    </div>
  </card>
  <!-- 续租账单计划弹框 -->
  <rele-bill-table-modal :isList="false" ref="billTableModalRef" />

  <ChangeReletModal
    v-if="changeReletVisible"
    v-model="changeReletVisible"
    :details="curRelet"
    v-model:okLoading="changeReletOkLoading"
    @ok="changeReletOkHandler"
  />
</template>

<script setup name="LongOrderRele">
  import ChangeReletModal from '../../components/change-relet-modal.vue'

  import { useTable } from '@/hooks/table'
  import releBillTableModal from '../../components/list-modals/rele-bill-table-modal.vue'
  import { getLongOrderReletList, checkRelet, deleteRelet } from '@/api/order/czsOrder'
  import { ref, onMounted } from 'vue'
  import { Modal, Message } from '@arco-design/web-vue'

  const curRelet = ref({})
  const order = ref({})
  const props = defineProps({
    orderId: Number,
  })
  const changeReletVisible = ref(false)
  const changeReletOkLoading = ref(false)

  const loadCompulsoryData = () => {
    const param = {
      id: props.orderId,
      pageNumber: 1,
      pageSize: 1000,
    }
    tableCompulsory.tableLoading = true
    getLongOrderReletList(param)
      .then((res) => {
        order.value = res.result
        const result = res.result
        const data = result.reletList //表
        if (data.length > 0) {
          data[0].first = true
        }
        tableCompulsory.dataList = data
      })
      .finally(() => {
        tableCompulsory.tableLoading = false
      })
  }

  const changeReletOkHandler = () => {
    Message.success('修改续租成功')
    changeReletVisible.value = false
    changeReletOkLoading.value = false
    loadCompulsoryData()
  }

  /** 删除续租 */
  const deleteReletHandler = (id) => {
    deleteRelet({ id }).then(() => {
      loadCompulsoryData()
    })
  }

  const openChangeReletModal = (record) => {
    curRelet.value = record
    changeReletVisible.value = true
  }

  // table 配置
  const tableCompulsory = useTable({
    pagination: false,
    columns: [
      { title: '续租时间', dataIndex: 'createTime', width: 180, fixed: 'left' },
      { title: '续租周期', dataIndex: 'time', width: 220, slotName: 'time' },
      { title: '续租时长', dataIndex: 'rentDays', width: 120 },
      { title: '费用状态', dataIndex: 'feeStatusName' },
      { title: '续租费', dataIndex: 'totalAmount', unit: '元' },
      { title: '续租备注', dataIndex: 'remark', width: 120, ellipsis: true },
    ],
    operates: [
      // {
      //   label: '续租合同',
      //   show: (record) => record.contractFileId,
      //   method: (record) => {
      //     showCont(record)
      //   },
      // },
      // {
      //   label: '账单计划',
      //   show: (record) => record.isStages,
      //   method: (record) => {
      //     showBillPlan(record)
      //   },
      // },
      {
        label: '修改续租',
        permission: 'svms:order:long-order.relet',
        show: (record) => record.first && record.operationFlag === 1,
        method: (record) => {
          console.log('record', record)
          checkRelet({ id: record.id }).then((res) => {
            const { result } = res
            if (result) {
              Modal.confirm({
                title: '修改续租',
                content: '该续租有电子合同，虽然您可以坚持此次操作，但我们建议您回退电子合同状态以保证数据合理准确',
                onOk: () => {
                  console.log('record', record)
                  openChangeReletModal(record)
                },
              })
            } else {
              openChangeReletModal(record)
              // Modal.warning({
              //   title: '修改续租',
              //   content: '友情提示，若需修改费用，请到订单详情-费用信息页',
              //   onOk: () => {
              //     console.log('record', record)
              //     openChangeReletModal(record)
              //   },
              // })
            }
          })
        },
      },
      {
        label: '删除续租',
        permission: 'svms:order:long-order.relet',
        show: (record) => record.first && record.operationFlag === 1,
        method: (record) => {
          console.log('record', record)
          checkRelet({ id: record.id }).then((res) => {
            const { result } = res
            if (result) {
              Modal.confirm({
                title: '删除续租',
                content: '该续租有电子合同，虽然您可以坚持此次操作，但我们建议您回退电子合同状态以保证数据合理准确',
                onOk: () => {
                  deleteReletHandler(record.id)
                },
              })
            } else {
              Modal.confirm({
                title: '删除续租',
                content: '确定删除该续租记录吗？',
                onOk: () => {
                  deleteReletHandler(record.id)
                },
              })
            }
          })
        },
      },
    ],
  })
  onMounted(() => {
    loadCompulsoryData()
  })
</script>

<style lang="less" scoped>
  .transform-top {
    margin-top: -30px;
  }
  .section-item {
    margin-bottom: 20px;
  }
</style>
